<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/common/common.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="${ctx}/static/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="${ctx}/static/css/basic.css" rel="stylesheet" type="text/css">
    <link href="${ctx}/static/plugins/validationEngine/css/validationEngine.jquery.css" rel="stylesheet"
          type="text/css">
    <script src="${ctx}/static/plugins/jQuery/jQuery-2.1.4.min.js"></script>
    <style type="text/css">

        .btn-sm {
            border-width: 4px;
            font-size: 13px;
            padding: 4px 9px;
            line-height: 1.39;
        }

        .code_space {
            margin-left: -4px;
            margin-right: 14px;
        }

        .btn_key {
            background-color: #6fb3e0 !important;
            border-color: #6fb3e0;
        }

        .btn_key:hover {
            color: #fff;
            background-color: #39b3d7;
            border-color: #269abc;
        }

        .code_width {
            width: 36.5%;
        }

        @media only screen and (max-width: 767px ) {
            .code_width {
                width: 102%;
            }
        }

        .radios {
            margin-bottom: 20px;
            float: left;
            margin-left: 40px;
        }
    </style>
</head>
<body>
<div class="content">

    <input id="pay" type="hidden" value="${pay}"/>

    <input id="oldTel" type="hidden" value="${sessionUserVo.telphone}"/>

    <div style=" font-size: 25px; text-align: center;margin-top: 30px">
        <button id="loginBtn" type="button" class="btn btn-success" onclick="loginForm()">登录密码</button>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <button id="payBtn" type="button" class="btn btn-success" onclick="payForm()">支付密码</button>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <button id="telBtn" type="button" class="btn btn-success" onclick="telForm()">手机号</button>
    </div>
    <hr>

    <!-- loginForm  -->
    <form class="form-horizontal" id="loginForm">
        <br>
        <input id="loginId" type="hidden" name="id" value="${sessionUserVo.id}"/>
        <div class="form-group">
            <label for="fixedLineTelephone" class="col-sm-4 control-label"><span
                    style="color:red;">*</span>新登录密码:</label>
            <div class="col-sm-3">
                <input type="password" class="form-control  validate[required,custom[number],minSize[6],maxSize[16]]"
                       id="loginPassword" name="newPassword" placeholder="请输入你的新登录密码">
            </div>
        </div>
        <div class="form-group">
            <label for="fixedLineTelephone" class="col-sm-4 control-label"><span
                    style="color:red;">*</span>确认密码:</label>
            <div class="col-sm-3">
                <input type="password"
                       class="form-control validate[required,custom[number],minSize[6],maxSize[16],equals[loginPassword]]"
                       id="loginRePassword" name="rePassword" placeholder="请再次输入密码">
            </div>
        </div>
        <div class="form-group">
            <label for="fixedLineTelephone" class="col-sm-4 control-label"><span style="color:red;">*</span>验证码:</label>
            <div class="col-sm-3">
                <input type="text" class="form-control validate[required]" id="loginVerificationCode"
                       name="verificationCode"
                       placeholder="请输入验证码" style="width: 150px;display:inline;">
                &nbsp;&nbsp;&nbsp;&nbsp;
                <input type="button" onclick="getLoginValidCode()" class="btn btn-info loginproving" value="发送">
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-10 text-center">
                <button type="button" id="loginAddBtn" class="btn btn-primary">保存</button>
            </div>
        </div>

    </form>

    <!-- payForm  -->
    <form class="form-horizontal" id="payForm">
        <br>
        <input id="payId" type="hidden" name="id" value="${sessionUserVo.id}"/>
        <div class="form-group">
            <label for="fixedLineTelephone" class="col-sm-4 control-label"><span
                    style="color:red;">*</span>新支付密码:</label>
            <div class="col-sm-3">
                <input type="password" class="form-control  validate[required,custom[number],minSize[6],maxSize[16]]"
                       id="payPwd" name="payPwd" placeholder="请输入新支付密码">
            </div>
        </div>
        <div class="form-group">
            <label for="fixedLineTelephone" class="col-sm-4 control-label"><span
                    style="color:red;">*</span>确认密码:</label>
            <div class="col-sm-3">
                <input type="password"
                       class="form-control  validate[required,custom[number],minSize[6],maxSize[16],equals[payPwd]]"
                       id="rePayPwd" name="rePayPwd" placeholder="请再次输入支付密码">
            </div>
        </div>
        <div class="form-group">
            <label for="fixedLineTelephone" class="col-sm-4 control-label"><span style="color:red;">*</span>验证码:</label>
            <div class="col-sm-3">
                <input type="text" class="form-control validate[required]" id="payVerificationCode"
                       name="verificationCode"
                       placeholder="请输入验证码" style="width: 150px;display:inline;">
                &nbsp;&nbsp;&nbsp;&nbsp;
                <input type="button" onclick="getPayValidCode()" class="btn btn-info payproving" value="发送">
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-10 text-center">
                <button type="button" id="payAddBtn" class="btn btn-primary">保存</button>
            </div>
        </div>

    </form>

    <!-- telForm  -->
    <form class="form-horizontal" id="telForm">
        <br>
        <input id="telId" type="hidden" name="id" value="${sessionUserVo.id}"/>
        <div class="form-group">
            <label for="fixedLineTelephone" class="col-sm-4 control-label"><span
                    style="color:red;">*</span>新手机号:</label>
            <div class="col-sm-3">
                <input type="text" class="form-control  validate[required,custom[number],minSize[11],maxSize[11]]"
                       id="telphone" name="telphone" onblur="checkTel()" placeholder="请输入你的新手机号">
            </div>
        </div>

        <div class="form-group">
            <label for="fixedLineTelephone" class="col-sm-4 control-label"><span
                    style="color:red;">*</span>登录密码:</label>
            <div class="col-sm-3">
                <input style="display:none"><!-- for disable autocomplete on chrome -->
                <input type="password" class="form-control  validate[required,custom[number],minSize[6],maxSize[16]]"
                       id="telPassword" name="password" placeholder="请输入你的密码" autocomplete="off">
            </div>
        </div>

        <div class="form-group">
            <label for="fixedLineTelephone" class="col-sm-4 control-label"><span style="color:red;">*</span>验证码:</label>
            <div class="col-sm-3">
                <input type="text" class="form-control validate[required]" id="telVerificationCode"
                       name="verificationCode"
                       placeholder="请输入验证码" style="width: 150px;display:inline;">
                &nbsp;&nbsp;&nbsp;&nbsp;
                <input type="button" onclick="getTelValidCode()" class="btn btn-info telproving" value="发送">
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-10 text-center">
                <button type="button" id="telAddBtn" class="btn btn-primary">保存</button>
            </div>
        </div>

    </form>
</div>
<script src="${ctx}/static/js/common/area.js" type="text/javascript"></script>
<script src="${ctx}/static/bootstrap/js/bootstrap.min.js"></script>
<script src="${ctx}/static/plugins/layer/layer.js"></script>
<script src="${ctx}/static/plugins/validationEngine/jquery.validationEngine-zh_CN.js"></script>
<script src="${ctx}/static/plugins/validationEngine/jquery.validationEngine.js"></script>
<script src="${ctx}/static/js/common/common.js" type="text/javascript"></script>
<script src="${ctx}/static/js/common/base.js" type="text/javascript"></script>
<script src="${ctx}/static/js/common/page.js" type="text/javascript"></script>
<!-- md5 -->
<script src="${ctx}/static/plugins/md5/jquery.md5.js"></script>
<script>
    $(function () {

        $('#loginForm')[0].reset();
        $('#payForm')[0].reset();
        $('#telForm')[0].reset();
        $("#telphone").val(null);

        if ($("#pay").val() != null && "" != $("#pay").val()) {
            $("#payBtn").click();
            $("#loginForm").hide();
            $("#telForm").hide();
            $("#payBtn").css("backgroundColor", "#C0C0C0");
        } else {
            $("#loginBtn").click();
            $("#payForm").hide();
            $("#telForm").hide();
            $("#loginBtn").css("backgroundColor", "#C0C0C0");
        }

        $("#loginForm").validationEngine({
            promptPosition: "topRight",
            validationEventTriggers: "keyup blur",
            success: false,
            failure: function () {
                callFailFunction()
            }
        });
        $("#telForm").validationEngine({
            promptPosition: "topRight",
            validationEventTriggers: "keyup blur",
            success: false,
            failure: function () {
                callFailFunction()
            }
        });
        $("#payForm").validationEngine({
            promptPosition: "topRight",
            validationEventTriggers: "keyup blur",
            success: false,
            failure: function () {
                callFailFunction()
            }
        });

        $("#loginAddBtn").click(function () {

            //------------1.先验证数据(电话)-----------
            var flag = $("#loginForm").validationEngine("validate");
            if (!flag) {
                return false;
            }

            //------------2.提交数据-----------
            $.ajax({
                async: false,
                type: "POST",
                url: "${ctx}/api/safeManage/updatePass",
                data: $("#loginForm").serialize(),
                success: function (d) {
                    console.log(d);
                    if (d.code == "200") {
                        alert("修改成功!");
                        window.location.href = "${ctx}/logout";
                    } else {
                        alert(d.message);
                    }
                }
            });
        });

        $("#payAddBtn").click(function () {

            //------------1.先验证数据(电话)-----------
            var flag = $("#payForm").validationEngine("validate");
            if (!flag) {
                return false;
            }

            //------------2.提交数据-----------
            $.ajax({
                async: false,
                type: "POST",
                url: "${ctx}/api/safeManage/updatePayPass",
                data: $("#payForm").serialize(),
                success: function (d) {
                    console.log(d);
                    if (d.code == "200") {
                        alert("修改成功!");
                        $("#payBtn").click();
                    } else {
                        alert(d.message);
                    }
                }
            });
        });


        $("#telAddBtn").click(function () {

            //------------1.先验证数据(电话)-----------
            var flag = $("#telForm").validationEngine("validate");
            if (!flag) {
                return false;
            }

            //------------2.提交数据-----------
            $.ajax({
                async: false,
                type: "POST",
                url: "${ctx}/api/safeManage/updateTel",
                data: $("#telForm").serialize(),
                success: function (d) {
                    console.log(d);
                    if (d.code == "200") {
                        alert("修改成功!");
                        window.location.href = "${ctx}/logout";
                    } else {
                        alert(d.message);
                    }
                }
            });
        });


    });

    function loginForm() {
        $("#telForm").hide();
        $("#payForm").hide();
        $("#loginForm").show();
        $("#loginBtn").css("backgroundColor", "#C0C0C0");
        $("#payBtn").css("backgroundColor", "");
        $("#telBtn").css("backgroundColor", "");
        $('#loginForm')[0].reset();
    }
    function payForm() {
        $("#loginForm").hide();
        $("#telForm").hide();
        $("#payForm").show();
        $("#payBtn").css("backgroundColor", "#C0C0C0");
        $("#loginBtn").css("backgroundColor", "");
        $("#telBtn").css("backgroundColor", "");
        $('#payForm')[0].reset();
    }
    function telForm() {
        $("#loginForm").hide();
        $("#payForm").hide();
        $("#telForm").show();
        $("#telBtn").css("backgroundColor", "#C0C0C0");
        $("#loginBtn").css("backgroundColor", "");
        $("#payBtn").css("backgroundColor", "");
        $('#telForm')[0].reset();
    }

    function checkTel() {
        var oldTel = $("#oldTel").val();

        var newTel = $("#telphone").val();
        if (newTel != null || "" != newTel) {
            if (newTel == oldTel) {
                alert("新手机号不能为旧手机号");
                $("#telphone").val(null);
            }
        }
    }


    function sendValidCode() {
        $.ajax({
            async: false,
            url: "/api/safeManage/sendValidCode",
            data: null,
            type: "POST",
            dataType: "json",
            success: function (data) {
                if (data.code == "200") {
                } else {
                    alert(data.message);
                }
            }
        });
    }

    function sendTelValidCode() {
        var tel = $("#telphone").val();
        if (tel != null && "" != tel) {
            $.ajax({
                async: false,
                url: "/api/safeManage/sendTelValidCode",
                data: {tel: tel},
                type: "POST",
                dataType: "json",
                success: function (data) {
                    if (data.code == "200") {
                    } else {
                        alert(data.message);
                    }
                }
            });
        } else {
            alert("请输入手机号");
        }


    }

    //发送login短信验证码
    function getLoginValidCode() {
        var loginPassword = $("#loginPassword").val();
        var loginRePassword = $("#loginRePassword").val();
        if (loginPassword != null && "" != loginPassword && loginRePassword != null && "" != loginRePassword) {
            /* 发送短信倒计时 */
            var time = 60;
            var s = time + 1;
            var timer = null;

            function countDown() {
                s--;
                $('.loginproving').val('(' + s + ')正在发送');
                $('.loginproving').attr("disabled", true);
                $('.loginproving').css('background', '#ccc');
                if (s == 0) {
                    clearInterval(timer);
                    $('.loginproving').val('重新发送');
                    $('.loginproving').attr("disabled", false);
                    $('.loginproving').css('background', '#6ACF33');
                    s = time + 1;
                }
            }

            countDown();
            timer = setInterval(countDown, 1000);
            sendValidCode();
        } else {
            alert("请先填写前面的内容")
        }

    }

    //发送pay短信验证码
    function getPayValidCode() {
        var payPwd = $("#payPwd").val();
        var rePayPwd = $("#rePayPwd").val();
        if (payPwd != null && "" != payPwd && rePayPwd != null && "" != rePayPwd) {
            /* 发送短信倒计时 */
            var time = 60;
            var s = time + 1;
            var timer = null;

            function countDown() {
                s--;
                $('.payproving').val('(' + s + ')正在发送');
                $('.payproving').attr("disabled", true);
                $('.payproving').css('background', '#ccc');
                if (s == 0) {
                    clearInterval(timer);
                    $('.payproving').val('重新发送');
                    $('.payproving').attr("disabled", false);
                    $('.payproving').css('background', '#6ACF33');
                    s = time + 1;
                }
            }

            countDown();
            timer = setInterval(countDown, 1000);
            sendValidCode();
        } else {
            alert("请先填写前面的内容")
        }


    }

    //发送tel短信验证码
    function getTelValidCode() {
        var tel = $("#telphone").val();
        var telPass = $("#telPassword").val();
        if (tel != null && "" != tel && telPass != null && "" != telPass) {
            /* 发送短信倒计时 */
            var time = 60;
            var s = time + 1;
            var timer = null;

            function countDown() {
                s--;
                $('.telproving').val('(' + s + ')正在发送');
                $('.telproving').attr("disabled", true);
                $('.telproving').css('background', '#ccc');
                if (s == 0) {
                    clearInterval(timer);
                    $('.telproving').val('重新发送');
                    $('.telproving').attr("disabled", false);
                    $('.telproving').css('background', '#6ACF33');
                    s = time + 1;
                }
            }

            countDown();
            timer = setInterval(countDown, 1000);
            sendTelValidCode();
        } else {
            alert("请先填写前面的内容")
        }


    }

    //根据所选类型判断是否显示身份证号码
    function chooseIdCard() {
        var id = $("input[name='accountType']").val();
        if (1 == id) {
            $("input[nama='idCard']").show();
        } else {
            $("input[nama='idCard']").hide();
        }

    }

    $(function () {
        $('#loginForm')[0].reset();
        $('#payForm')[0].reset();
        $('#telForm')[0].reset();
        $("input[name='accountType']").change(function () {
            if ($(this).val() == 1) {
                $("#shenfengzheng").show();
            } else {
                $("#shenfengzheng").hide();
            }
        });
    });

</script>
</body>